<template>
  <div class="year-container">
    <div class="year-container-title">
      <p>年度游客量对比</p>
      <img src="@/assets/images_screen/dataScreen-title.png" alt="">
    </div>
    <div class="year-container-charts" ref="chartsDom"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

//获取dom
let chartsDom = ref();

//生命周期
onMounted(()=>{
  let mycharts = echarts.init(chartsDom.value);
  mycharts.setOption({
      text:"散点图",
      left:'40%',
      textStyle:{
        color:"white"
      },
      xAxis:{show:true,type:"category"},
      yAxis:{show:false},
      grid:{top:20,left:10,right:0,bottom:10},
      series:{
        type:"scatter",
        data:[33,88,21,50,89,90,89,40,30,10],
        symbol:"arrow"
      }
  })
})
</script>
<script lang="ts">
export default {
    name:"Year"
}
</script>

<style scoped>
.year-container{
  width: 100%;
  height: 100%;
  background: url("@/assets/images_screen/dataScreen-main-lb.png") no-repeat;
  background-size: 100% 100%;
}

.year-container .year-container-title{
  margin-left: 20px;
}
.year-container .year-container-title p{
  color:white;
  font-size: 20px;
}

.year-container-charts{
  height:calc(100% - 30px);
}
</style>